<template>
  <el-container class="aside">
    <el-header class="header">
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <img src="../../../static/images/logo.png" alt>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-dark">
          <h3>后台管理系统</h3>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-dark">
          <a href="javascript:;" @click.prevent="loginOut">退出</a>
        </div>
      </el-col>
    </el-header>
    <el-container>
        <!-- 开启路由 -->
      <el-aside width="200px">
        <el-menu

        :router="true"
          default-active="2"
          class="el-menu-vertical-demo aside"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
        >
          <!-- 1 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="users">
              <!-- <template slot="title"> -->
                <i class="el-icon-sort"></i>
                <span>用户列表</span>
              <!-- </template> -->
            </el-menu-item>
          </el-submenu>
          <!-- 2 -->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="role">
              <i class="el-icon-news"></i>
              角色列表
            </el-menu-item>
            <el-menu-item index="rights">
              <i class="el-icon-news"></i>
              权限列表
            </el-menu-item>
          </el-submenu>
          <!-- 3 -->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1">
              <i class="el-icon-news"></i>
              商品列表
            </el-menu-item>
            <el-menu-item index="3-2">
              <i class="el-icon-news"></i>
              分类参数
            </el-menu-item>
            <el-menu-item index="3-3">
              <i class="el-icon-news"></i>
              商品分类
            </el-menu-item>
          </el-submenu>
          <!-- 4 -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="4-1">
              <i class="el-icon-news"></i>
              订单列表
            </el-menu-item>
          </el-submenu>
          <!-- 5 -->
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>数据统计</span>
            </template>
            <el-menu-item index="5-1">
              <i class="el-icon-news"></i>
              数据报表
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="content">
        <div class="main">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  beforeCreate () {
    // 检测是否存在token
    if (!localStorage.getItem('token')) {
      this.$message.warning('请先登录哟!')
      return this.$router.push({ path: '/login' })
    }
  },
  methods: {
    // 用户退出
    loginOut () {
      // alert(2)
      // 提示退出成功

      // 跳转登录页
      // this.$message.success('退出成功');

      this.$confirm('确定退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // 删除 token
            localStorage.clear('token')
            this.$router.push({ path: '/login' })
            done()
          } else {
            done()
          }
        }
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style>
.header {
  background: rgb(123, 131, 143);
}
.header h3 {
  text-align: center;
  color: #fff;
}
.header a {
  line-height: 62px;
  color: #fff;
}
.aside {
  height: 100%;
}
.content {
  background: #e9eef3;
  padding: 15px;
}
.content .main {
    padding: 20px;
  /* height: 100%; */
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 15px #ccc;
  box-sizing: border-box;
}
</style>
